<template>
  <!-- 第一层，满宽，吸顶 -->
  <nav
    class="fixed top-0 w-full h-16 z-40 border-b dark:border-gray-800 bg-white dark:bg-gray-900"
    :class="{ shadow: scrollY > 0 }"
  >
    <!-- 第二层，居中，控制长度，flex -->
    <div class="w-full h-full lg:w-4/5 mx-auto my-auto flex items-center">
      <!-- 网站左上角的logo -->
      <div class="lg:w-1/5 Container">
        <NuxtLink
          :to="localePath('/')"
          class="flex-shrink-0 font-bold text-xl m-2"
          :aria-label="`${settings.title} Logo`"
        >
          <p v-if="!logo">{{ settings.title }}</p>
          <img
            v-else
            :src="logo[mode]"
            class="Icon text-transparent"
            :class="mode"
            :alt="settings.title"
            :title="settings.title"
          />
        </NuxtLink>

        <el-divider v-if="logo" class="hidden lg:block flex-1">
          <NcIconLightning
            class="absolute inset-0 m-auto fill-current Icon bg-white dark:bg-gray-900"
            :class="[user.hasLogined ? 'text-primary-500' : 'text-gray-500']"
          ></NcIconLightning>
        </el-divider>

        <NcCompLoginAvatar class="m-2"></NcCompLoginAvatar>
      </div>

      <!-- 网站中间的搜索栏 -->
      <div class="hidden md:block lg:w-3/5 Container">
        <CompSearch></CompSearch>
      </div>

      <!-- 右侧的一些button -->
      <div class="lg:w-1/5 Container justify-around">
        <!-- 菜单项 -->
        <NcCompMenuDrawer></NcCompMenuDrawer>
        <!--        <NcCompMenuTrigger></NcCompMenuTrigger>-->

        <!--语言切换-->
        <NcIconSwitchLang></NcIconSwitchLang>

        <!--夜间模式-->
        <BtnSwitchColor></BtnSwitchColor>
      </div>
    </div>
  </nav>
</template>

<script>
import { mapGetters } from 'vuex'
import NcCompMenuDrawer from '~/components/menu-comp/NcCompMenuDrawer'
import NcCompLoginAvatar from '~/components/login-comp/NcCompLoginAvatar'
import NcIconSwitchLang from '~/components/global/icon/NcIconSwitchLang'
import BtnSwitchLang from '~/components/global/btn/BtnSwitchLang'
import BtnSwitchColor from '~/components/global/btn/BtnSwitchColor'
import CompSearch from '~/components/layout-comp/CompSearch'

export default {
  name: 'CompHeader',
  components: {
    CompSearch,
    NcIconSwitchLang,
    NcCompMenuDrawer,
    NcCompLoginAvatar,
    BtnSwitchLang,
    BtnSwitchColor,
  },
  data() {
    return {
      drawerVisible: false,
      scrollY: 0,
    }
  },
  computed: {
    ...mapGetters(['settings', 'user']),
    mode() {
      return this.$colorMode.value
    },
    logo() {
      if (!this.settings.logo) return {}
      return {
        light: this.settings.logo.light,
        dark: this.settings.logo.dark,
      }
    },
  },
  beforeMount() {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    handleScroll() {
      this.scrollY = window.scrollY
    },
  },
}
</script>
